@extends("base.base")
@include('Cart.header')
@section("main")
    <link rel="stylesheet" href="{{asset(env('CDN_HOST').'/public/css/cart/index.css')}}">

    @if(empty($cart))
        <main id="main" class="main">
            <div class="cart-info">
                <ul class="nav-ul cart-info-ul">
                    <li class="nav-li cart-info-li">一冉再自品牌</li>
                    <li class="nav-li cart-info-li">30天无忧退货</li>
                    <li class="nav-li cart-info-li">48小时快速退款</li>
                    <span class="clear-both"></span>
                </ul>
            </div>
            <div id="none-cart" class="none-cart">
                <img class="none-cart-img" src="{{asset(env("CDN_HOST")."/img/cart/cart.png")}}" alt="">
                <p class="none-cart-p">去添加点什么吧</p>
            </div>
        </main>
    @else
        <main id="main" class="main">
            <div class="cart-info">
                <ul class="nav-ul cart-info-ul">
                    <li class="nav-li cart-info-li">一冉再自品牌</li>
                    <li class="nav-li cart-info-li">30天无忧退货</li>
                    <li class="nav-li cart-info-li">48小时快速退款</li>
                    <span class="clear-both"></span>
                </ul>
            </div>
            <div id="main-list" class="main-list">
                @foreach($cart as $key => $value)
                    <ul class="list-ul">
                        @foreach($value as $k => $v)
                            <li class="list-li list-box" data-cart-id="{{$v["cart_id"]}}">
                                <div class="box-check">
                                    <span class="circle list-circle"></span>
                                </div>
                                <a href="/commodity/{{$v["commodity_id"]}}">
                                    <div class="box-img">
                                        <img src="{{asset($v["info_img_url"])}}" alt="">
                                    </div>
                                </a>
                                <div class="box-info">
                                    <div class="cnt">
                                        <a href="/commodity/{{$v["commodity_id"]}}">
                                            <p class="line1">
                                                <span class="line1-name">
                                                    <span>{{$v["commodity_name"]}}</span>
                                                </span>
                                                <span class="line1-num">
                                                    <span>x</span>
                                                    <span class="commodity-number">{{$v["number"]}}</span>
                                                </span>
                                            </p>
                                            <p class="line2">{{$v["commodity_color_name"]}}
                                                ; {{$v["commodity_size_name"]}}</p>
                                        </a>
                                        <div class="line3">
                                            <span class="line3-price">
                                                <span>¥</span>
                                                <span class="commodity-price"
                                                      data-unit-price="{{$v["unit_price"]}}">{{$v["all_price"]}}</span>
                                            </span>
                                            @if($v["number"] > 1)
                                                <div class="m-selnum msd-none m-selnum-1 dl"
                                                     style="border-left:0.1rem solid #666666">
                                                    <div class="m-selnum-minus msm-none"
                                                         style="border-top: 1px solid #666666;border-bottom: 1px solid #666666;color: #666666">
                                                        -
                                                    </div>
                                                    @else
                                                        <div class="m-selnum msd-none m-selnum-1 dl"
                                                             style="border-left:0.1rem solid #f1f1f1">
                                                            <div class="m-selnum-minus msm-none"
                                                                 style="border-top: 1px solid #f1f1f1;border-bottom: 1px solid #f1f1f1;color: #f1f1f1">
                                                                -
                                                            </div>
                                                            @endif
                                                            <div class="textWrap">
                                                                <input class="textWrap-input" type="tel"
                                                                       value="{{$v["number"]}}"
                                                                       disabled="">
                                                            </div>
                                                            <div class="m-selnum-plus more">
                                                                +
                                                            </div>
                                                        </div>
                                                </div>
                                        </div>
                                    </div>
                            </li>
                        @endforeach
                    </ul>
                @endforeach
            </div>
            @include('Cart.footer')
            <script>
                var cart = <?= array_to_json($cartData)?>;
                var cart_all = {
                    number: 0,
                    price: 0
                }
                $(".m-selnum-plus").on('click', function () {
                    parent = $(this).parents('.list-box')
                    var key = "cart" + parent.attr("data-cart-id")
                    cart[key].number++
                    cart[key].all_price = cart[key].number * cart[key].price
                    up_cart_num(parent, key)
                })

                $(".m-selnum-minus").on('click', function () {
                    parent = $(this).parents('.list-box')
                    var key = "cart" + parent.attr("data-cart-id")
                    if (cart[key].number < 2)
                        return false
                    cart[key].number--
                    cart[key].all_price = cart[key].number * cart[key].price
                    up_cart_num(parent, key)
                })

                function up_cart_num($obj, key) {
                    var data = cart[key]
                    loading.show()
                    $.post("/api/up_cart_num", data, function (e) {
                        if (e.errorCode == 0) {
                            check_data($obj, key)
                        } else {
                            alert(e.errorMsg)
                            window.location.reload();
                        }
                        change_cart_info()
                        loading.hide()
                    })
                }

                function check_data($obj, key) {
                    $obj.find('.textWrap-input').val(cart[key].number)
                    $obj.find('.commodity-number').text(cart[key].number)
                    $obj.find('.commodity-price').text(cart[key].all_price)
                    if (cart[key].number > 1) {
                        m_selnum_active($obj)
                    } else {
                        m_selnum_none($obj)
                    }
                }

                function m_selnum_none($obj) {
                    $obj.find(".m-selnum").css('border-left', '0.1rem solid #f1f1f1');
                    $obj.find('.m-selnum-minus').css({
                        "border-top": "1px solid #f1f1f1",
                        "border-bottom": "1px solid #f1f1f1",
                        "color": "#f1f1f1"
                    });
                }

                function m_selnum_active($obj) {
                    $obj.find(".m-selnum").css('border-left', '0.1rem solid #666666');
                    $obj.find('.m-selnum-minus').css({
                        "border-top": "1px solid #666666",
                        "border-bottom": "1px solid #666666",
                        "color": "#666666"
                    });
                }

                function change_cart_info() {
                    $cart_active = $(".circle-active")
                    cart_all.price = parseFloat(0)
                    cart_all.number = $cart_active.length
                    for (var i = 0; i < $cart_active.length; i++) {
                        var $parent = $cart_active.eq(i).parents('.list-box')
                        var key = "cart" + $parent.attr("data-cart-id")
                        cart_all.price += parseFloat(cart[key].all_price)
                    }
                    $(".cft-cart-price").text(cart_all.price)
                    $(".cft-cart-num").text(cart_all.number)

                }

                $(".list-circle").on("click", function () {
                    if ($(this).hasClass("circle")) {
                        $(this).removeClass("circle")
                        $(this).addClass("circle-active")
                    } else {
                        $(this).removeClass("circle-active")
                        $(this).addClass("circle")
                    }
                    change_cart_info()
                })
            </script>
        </main>
    @endif

@endsection
@include('base.bottom_nav')